<template>
  <view class="login-phone-page">
    <view class="logo-box">
      <up-image width="320rpx" height="44rpx" :show-loading="true" :src="logoCdn"></up-image>
      <text>IES智慧能源管理系统</text>
    </view>

    <view class="login-content-box">
      <up-input
        placeholder="请输入手机号"
        v-model="phone"
        border="bottom"
        clearable
      ></up-input>
      <up-gap height="24rpx"></up-gap>
      <up-input
        placeholder="请输入验证码"
        v-model="code"
        border="bottom"
      >
        <template #suffix>
          <view class="code-box">
            <view v-if="isCountDownShow">
              <up-text fontSize="28rpx" color="rgba(213, 68, 72, .5)" :text="tips"></up-text>
            </view>
            <up-text v-else @click="getPhoneCode" fontSize="28rpx" color="#D54448" text="获取验证码"></up-text>
          </view>
				</template>
      </up-input>

      <!-- <up-gap height="48rpx"></up-gap> -->

      <view class="user-protocol-box">
        <up-checkbox-group>
          <up-checkbox
            :checked="protocolChecked"
            @change="protocolChecked = $event"
            shape="circle"
            size="28rpx"
          >
          </up-checkbox>
        </up-checkbox-group>
        <view class="protocol-text-box">
          <text>若手机号未注册将进入注册流程，注册即为同意</text>
          <text class="protocol">《用户使用协议》</text>
          <text>和</text>
          <text class="protocol">《隐私政策》</text>
        </view>
      </view>

      <up-gap height="32rpx"></up-gap>

      <up-button
        type="primary"
        throttleTime="300"
        text="登陆"
        @click="loginHandler"
      ></up-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import logoCdn from '@/static/image/logo_cdn.png'
import { ref } from 'vue';

const tips = ref('');
const seconds = ref(60);
const protocolChecked = ref(false)
const isCountDownShow = ref(false);
let timer: any = null;
const code = ref('');
const phone = ref('');

const getPhoneCode = () => {
  // if (uCodeRef.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
      title: '正在获取验证码',
    });
    setTimeout(() => {
      isCountDownShow.value = true;
      uni.hideLoading();
      new Array(seconds.value + 1).fill(0).forEach((item, index) => {
        timer = setTimeout(() => {
          tips.value = `${seconds.value - index}s后重发`;
          if (seconds.value - index === 0) {
            clearTimeout(timer);
            timer = null;
            end();
          }
        }, index * 1000);
      })
      // 这里此提示会被start()方法中的提示覆盖
      uni.$u.toast('验证码已发送');
    }, 2000);
  // } else {
  //   uni.$u.toast('倒计时结束后再发送');
  // }
  console.log('获取验证码')
}

const end = () => {
  uni.$u.toast('倒计时结束');
  isCountDownShow.value = false;
};

const loginHandler = () => {
  if (!phone.value) {
    uni.$u.toast('请输入手机号');
    return
  }
  if (!code.value) {
    uni.$u.toast('请输入验证码');
    return
  }
  if (!protocolChecked.value) {
    uni.$u.toast('请同意协议');
  } else {
    uni.showLoading({
      title: '正在登录',
    });
    setTimeout(() => {
      uni.hideLoading();
      uni.$u.toast('登录成功');
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }, 2000);
  }
}

</script>

<style lang="scss" scoped>
.logo-box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 158rpx;
  flex-direction: column;

  text {
    font-size: 44rpx;
    color: $uni-text-color;
    margin-top: 30rpx;
    font-weight: block;
  }
}

.login-content-box {
  padding: 240rpx 60rpx 0 60rpx;
}

.user-protocol-box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 80rpx;

  .protocol-text-box {
    padding-left: 4rpx;
    text {
      font-size: 24rpx;
      color: $uni-text-color-grey;
    }
    .protocol {
      color: $uni-color-primary;
    }
  }
}

.code-box {
  display: flex;
  // justify-content: center;
  align-items: center;
  flex-direction: row;
  // border-left: 2rpx solid #e1e1e1;
  // padding-left: 16rpx;
}
</style>
